<template>
  <div class="container">
    <!-- 搜索框 -->
    <van-search shape="round" placeholder="请输入搜索关键词" />
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" height="300">
      <van-swipe-item v-for="(item, index) in swiper_img" :key="index">
        <van-image :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="notop">
      <!-- 标签导航栏 -->
      <van-grid :column-num="4" square clickable border="false">
        <van-grid-item icon="fire" text="推荐" dot icon-color="#fff" />
        <van-grid-item icon="location" text="攻略" dot icon-color="#fff" />
        <van-grid-item icon="column" text="公告" badge="99+" icon-color="#fff" />
        <van-grid-item icon="ellipsis" text="更多内容" icon-color="#fff" />
      </van-grid>
      <van-cell value="了解更多" is-link class="tag">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">精选内容</span>
        </template>
      </van-cell>
      <van-tabs v-model="activeTab" shrink class="message" background="#e2f98b" animated="true" swipeable="true">
        <van-tab title="论坛头条">
          <van-cell-group>
            <!-- 添加@click事件 -->
            <van-cell v-for="news in sportsNewsList" :key="news.id" :title="news.title" :label="news.time"
              class="message-item" :thumb="news.imageUrl" @click="goToNewsDetail(news)">
              <template #footer>
                <p>{{ news.description }}</p>
              </template>
            </van-cell>
          </van-cell-group>
        </van-tab>

        <!-- 官方发布 -->
        <van-tab title="官方发布" :dot="true">
          <van-cell-group>
            <!-- 添加@click事件 -->
            <van-cell v-for="news in techNewsList" :key="news.id" :title="news.title" :label="news.time"
              class="message-item" :thumb="news.imageUrl" @click="goToNewsDetail(news)">
              <template #footer>
                <p>{{ news.description }}</p>
              </template>
            </van-cell>
          </van-cell-group>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';  // 新增导入

const router = useRouter();  // 新增路由实例

// 新增跳转方法
// Modified: Add 'id' to params to satisfy route requirements
const goToNewsDetail = (news) => {
  // 将新闻对象序列化为JSON字符串存入LocalStorage
  localStorage.setItem('currentNews', JSON.stringify(news));
  // 跳转详情页（保留id参数用于路由匹配）
  router.push({
    name: 'NewsDetail',
    params: { id: news.id },
  });
};

const activeTab = ref(0);

const techNewsList = ref([
  {
    "id": 1,
    "title": "晓塘乡暴雨天气出行提示",
    "time": "2025-06-12",
    "description": "近期晓塘乡将迎来暴雨天气，为确保游客安全，建议游客减少户外活动，避免前往河道、山谷等危险区域。如已在晓塘乡，出行时请注意携带雨具，驾车注意道路积水情况，谨慎驾驶。",
    "imageUrl": ""
  },
  {
    "id": 2,
    "title": "晓塘乡旺季游客人数统计及出行建议",
    "time": "2025-07-18",
    "description": "晓塘乡目前处于旅游旺季，上周游客接待量已达8000人次。预计未来一周游客数量仍将保持较高水平，建议游客提前预订住宿和门票，错峰出行。同时，各景点将根据人流量采取限流措施，请游客配合现场工作人员引导。",
    "imageUrl": ""
  },
  {
    "id": 3,
    "title": "晓塘乡海之湾户外大本营安全游玩提示",
    "time": "2025-08-05",
    "description": "前往晓塘乡海之湾户外大本营游玩的游客请注意，参与热气球、滑草等项目时，请严格遵守工作人员的指导，做好安全防护措施。如遇恶劣天气，部分项目可能暂停开放，请留意景区公告。",
    "imageUrl": "https://example.com/hzw大本营.jpg"
  },
  {
    "id": 4,
    "title": "晓塘乡国庆假期旅游情况通报",
    "time": "2025-09-28",
    "description": "国庆假期即将来临，预计晓塘乡将迎来旅游高峰。据预测，假期期间晓塘乡各景点接待游客量将大幅增加。请游客提前规划行程，文明旅游，爱护环境，共同营造良好的旅游氛围。",
    "imageUrl": ""
  },
  {
    "id": 5,
    "title": "晓塘乡部分道路施工通知",
    "time": "2025-10-10",
    "description": "因基础设施建设需要，晓塘乡部分道路将于10月15日起进行施工，施工期间可能会对交通造成一定影响。请过往车辆和行人按照现场交通指示通行，或提前规划绕行路线。给您带来的不便，敬请谅解。",
    "imageUrl": ""
  }
]);

const sportsNewsList = ref([
  {
    "id": 5,
    "title": "宁波晓塘乡：古村与田园的诗意之旅",
    "time": "2025-06-10",
    "imageUrl": "https://example.com/晓塘乡古村.jpg",
    "description": "漫步在宁波晓塘乡的黄埠村，古老的建筑诉说着岁月的故事。周边田园风光如画，还可体验采摘水果的乐趣，感受乡村的宁静与美好。"
  },
  {
    "id": 6,
    "title": "海之湾户外大本营：宁波晓塘乡的欢乐天堂",
    "time": "2025-07-15",
    "imageUrl": "https://example.com/海之湾.jpg",
    "description": "在晓塘乡的海之湾户外大本营，热气球带你俯瞰美景，滑草场、卡丁车带来刺激体验。适合全家出游，尽情享受户外欢乐时光。"
  },
  {
    "id": 7,
    "title": "晓塘乡水果采摘季：收获甜蜜与快乐",
    "time": "2025-08-20",
    "imageUrl": "https://example.com/晓塘乡水果采摘.jpg",
    "description": "夏季是晓塘乡水果丰收的季节，走进白玉湾生态农业观光园，亲手采摘新鲜的水果，品尝自然的甜蜜，体验田园生活的乐趣。"
  },
  {
    "id": 8,
    "title": "晓塘乡青山头村：滨海风情与休闲之选",
    "time": "2025-09-25",
    "imageUrl": "https://example.com/青山头村.jpg",
    "description": "青山头村位于晓塘乡，滨海风光迷人。沿着千米慢行系统漫步，在烧烤场享受美食，还能体验垂钓的乐趣，感受滨海休闲风情。"
  },
  {
    "id": 9,
    "title": "月楼村：探寻晓塘乡的文化古韵",
    "time": "2025-10-12",
    "imageUrl": "https://example.com/月楼村.jpg",
    "description": "走进月楼村，参观“钟郝遗徽”石亭，探寻“月楼八景”。古朴的村落，深厚的文化底蕴，让你沉浸在历史的氛围中。"
  }, {
    "id": 10,
    "title": "晓塘乡：柑橘采摘与文化体验之旅",
    "time": "2025-11-15",
    "imageUrl": "https://example.com/晓塘乡柑橘园.jpg",
    "description": "11 月，晓塘乡的柑橘成熟了。前往晓塘乡的柑橘园，亲自采摘新鲜的柑橘，品尝甜蜜的果实。还可以参观当地的柑橘文化展示馆，了解柑橘的种植历史、品种特点以及相关的文化习俗。"
  },
  {
    "id": 11,
    "title": "海之湾户外大本营：冬日暖阳下的户外运动天堂",
    "time": "2025-12-20",
    "imageUrl": "https://example.com/海之湾冬日.jpg",
    "description": "冬季的海之湾户外大本营别有一番风味。在暖阳下，体验高空热气球、极速滑草场等刺激项目，感受冬日的活力。玩累了还能在大本营的休息区享受温暖的阳光，品尝热饮和小吃。"
  },
  {
    "id": 12,
    "title": "晓塘乡：春季花海与田园漫步",
    "time": "2026-03-25",
    "imageUrl": "https://example.com/晓塘乡花海.jpg",
    "description": "春季，晓塘乡的海之湾盛开，一片绚烂。漫步在花海中，拍照留念，感受春天的气息。还可以去周边的田园，欣赏嫩绿的农作物，体验乡村的宁静与美好。"
  },
  {
    "id": 13,
    "title": "青山头村：夏日滨海休闲度假",
    "time": "2026-07-10",
    "imageUrl": "https://example.com/青山头夏日.jpg",
    "description": "夏天的青山头村是避暑的好去处。来到这里，享受滨海风光，在千米慢行系统边散步，感受海风的吹拂。还可以在烧烤场举办一场烧烤派对，或者在垂钓场钓鱼，度过一个悠闲的夏日假期。"
  },
  {
    "id": 14,
    "title": "月楼村：秋季古韵探寻与户外徒步",
    "time": "2026-10-05",
    "imageUrl": "https://example.com/月楼村秋季.jpg",
    "description": "秋季，月楼村的景色如画。参观 “钟郝遗徽” 石亭和 “月楼八景”，感受古村的文化底蕴。同时，沿着户外登山步道徒步，欣赏沿途的秋景，呼吸新鲜空气，享受大自然的馈赠。"
  },
  {
    "id": 15,
    "title": "西边塘村：葡萄采摘与亲子欢乐游",
    "time": "2026-08-18",
    "imageUrl": "https://example.com/西边塘葡萄.jpg",
    "description": "8 月是葡萄成熟的季节，西边塘村的葡萄园硕果累累。带孩子来这里采摘葡萄，体验亲子乐趣。此外，还可以在村里的儿童户外体验区游玩，有沙滩乐园、骑马场、卡丁车场等众多项目，孩子们尽情玩耍。"
  },
  {
    "id": 16,
    "title": "黄埠村：明清古村的宁静与风味",
    "time": "2026-05-22",
    "imageUrl": "https://example.com/黄埠村古建.jpg",
    "description": "走进黄埠村，仿佛穿越回明清时期。欣赏三戒堂、三三堂等豪华大院，感受江南古建筑的魅力。漫步在古村的石板路上，聆听历史的故事，享受宁静的乡村时光。"
  },
  {
    "id": 17,
    "title": "晓塘乡：民俗文化体验之旅",
    "time": "2026-04-08",
    "imageUrl": "https://example.com/晓塘乡民俗.jpg",
    "description": "参加晓塘乡的四月八家风民俗节，体验当地的民俗文化。观看传统的民俗表演，品尝特色美食，参与各种民俗活动，深入了解晓塘乡的风土人情。"
  },
  {
    "id": 18,
    "title": "鹤岭村：户外烧烤与亲子露营",
    "time": "2026-06-12",
    "imageUrl": "https://example.com/鹤岭村露营.jpg",
    "description": "带着家人和朋友来到鹤岭村户外烧烤基地，体验户外烧烤的乐趣。这里配备了豪华的烧烤亭和垂钓区，还可以露营。在夜晚，仰望星空，享受亲子时光，感受大自然的美好。"
  },
  {
    "id": 19,
    "title": "晓塘乡：环大塘港精品农业观光游",
    "time": "2026-09-16",
    "imageUrl": "https://example.com/环大塘港.jpg",
    "description": "沿着环大塘港精品农业观光带游览，欣赏独特的 “港、田、岛、渔、景” 风光。参观沿线的农业观光园，了解当地的农业生产，品尝新鲜的农产品，感受田园生活的魅力。"
  }
]);
const swiper_img = [
  'src/assets/index/swiper1.jpg',
  "src/assets/index/swiper2.jpeg",
  "src/assets/index/swiper3.jpeg",
  "src/assets/index/swiper4.png",
]
</script>

<style scoped lang="scss">
.van-search {
  background: none;
  opacity: 0.8;
  z-index: 1;
  width: 100%;
  position: absolute;
  top: 20px;
}

.van-image {
  width: 100%;
  height: 100%;
  object-fit: cover; // 确保图片填充整个区域
}

.notop {
  margin-top: 20px;
  padding: 0 15px;
}

.van-grid {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 20px !important;
  overflow: hidden;

  & .van-grid-item {
    padding: 15px;
  }
}

:deep(.van-grid-item) .van-icon {
  border-radius: 50%;
  padding: 0.5em;
}

:deep(.van-grid-item:nth-child(1)) .van-icon {
  background: #d90314 !important;
}

:deep(.van-grid-item:nth-child(2)) .van-icon {
  background: #fec133 !important;
}

:deep(.van-grid-item:nth-child(3)) .van-icon {
  background: #31c27c !important;
}

:deep(.van-grid-item:nth-child(4)) .van-icon {
  background: #7188fc !important;
}

.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.tag {
  background: none !important;
}

.message {
  :deep(.van-tabs__wrap) {
    border-radius: 20px 20px 0 0 !important;
  }

  :deep(.van-tabs__content) {
    border-radius: 0 0 20px 20px !important;
    background: linear-gradient(170deg, #e2f98b, white, white, white);

    & * {
      background: none !important;
    }
  }
}
</style>
